<template>
  <div class="components-container">

    <code>Markdown is based on
      <a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，Simply encapsulated in Vue.
      <a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
         target="_blank">
        Documentation </a>
    </code>

    <div class="editor-container">
      <el-tag class="tag-title">Basic:</el-tag>
      <markdown-editor height="300px" v-model="content"/>
    </div>

    <div class="editor-container">
      <el-tag class="tag-title">Markdown Mode:</el-tag>
      <markdown-editor :options="{hideModeSwitch:true,previewStyle:'tab'}" height="200px" ref="markdownEditor"
                       v-model="content"/>
    </div>

    <div class="editor-container">
      <el-tag class="tag-title">Customize Toolbar:</el-tag>
      <markdown-editor
        :options="{ toolbarItems: ['heading','bold','italic']}"
        ref="markdownEditor"
        v-model="content"
      />
    </div>

    <div class="editor-container">
      <el-tag class="tag-title">I18n:</el-tag>
      <el-alert :closable="false" title="You can change the language of the admin system to see the effect"
                type="success"/>
      <markdown-editor :language="language" height="300px" v-model="content"/>
    </div>

    <el-button @click="getHtml" icon="el-icon-document" style="margin-top:80px;" type="primary">Get HTML</el-button>
    <!-- eslint-disable-next-line -->
    <div v-html="html"/>

  </div>
</template>

<script>
  import MarkdownEditor from '@/components/MarkdownEditor'

  const content = `
**This is test**

* vue
* element
* webpack

`
  export default {
    name: 'MarkdownDemo',
    components: {MarkdownEditor},
    data() {
      return {
        content: content,
        html: '',
        languageTypeList: {
          'en': 'en_US',
          'zh': 'zh_CN',
          'es': 'es_ES'
        }
      }
    },
    computed: {
      language() {
        return this.languageTypeList[this.$store.getters.language]
      }
    },
    methods: {
      getHtml() {
        this.html = this.$refs.markdownEditor.getHtml()
        console.log(this.html)
      }
    }
  }
</script>

<style scoped>
  .editor-container {
    margin-bottom: 30px;
  }

  .tag-title {
    margin-bottom: 5px;
  }
</style>
